<template>
  <Container>
	  <!-- <span class="subhead">{{title}}</span> -->
	  <div class="mcontainer">
		  <div class="rdbox">
			  <slot></slot>
		  </div>

		  <span class="subhead">{{title}}</span>
	  </div>

  </Container>
</template>

<script>
// import { scrollTo } from '@/utils/scroll-to'
import Container from '@/components/Container'

export default {
  name: 'ContainerExt',
  components: {
    Container
  },
  props: {
    title: {
      type: String,
      default: ''
    },
  },
  computed: {

  },
  methods: {

  }
}
</script>

<style scoped>
	.mcontainer {
		position:relative;
	}

	.rdbox {
		/* width: 100px; */
		/*第一个2*20px是el-main的padding 20px，第二2*20px是自己的padding，4px是border边的2px*/
		height:calc(100vh - 2*9vh - 2*20px - 2*15px - 4px);
		/* height:calc(100vh - 2*9vh - 2*20px ); */

		border:solid 2px #c5c9d0;
		/* border-radius: 20px/10px */
		border-radius: 13px;

		padding: 15px;
	}

	.subhead {
		position:absolute;
		top:-15px;
		left: 25px;
		color: #c5c9d0;
		background-color: #000;
		font-size: 23px;
		font-weight: 400;
		padding-left: 5px;
		padding-right: 5px;
	}

</style>
